<template>
  <div class="ppt-preview">
    <!-- 工具栏 -->
    <div class="ppt-toolbar">
      <el-space>
        <el-tag type="info">{{ file?.name }}</el-tag>
        <span class="file-size">{{ formatFileSize(file?.size) }}</span>
      </el-space>
      <el-space>
        <el-button size="small" :icon="Download" @click="downloadFile">
          下载
        </el-button>
      </el-space>
    </div>

    <!-- 加载提示 -->
    <div v-if="!previewUrl" class="loading-container">
      <el-icon class="is-loading" :size="50">
        <Loading />
      </el-icon>
      <p>正在准备 PPT 预览...</p>
    </div>

    <!-- PPT 预览 iframe -->
    <iframe 
      v-else
      :src="`/pptx/index.html?pptUrl=${previewUrl}`"
      class="ppt-iframe"
      frameborder="0"
      @load="handleIframeLoad"
    ></iframe>
  </div>
</template>

<script setup>
import { ref, watch, onUnmounted } from 'vue'
import { Loading, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { normalizeProxyUrl } from '../../utils/fileHelper'

const props = defineProps({
  file: {
    type: Object,
    required: true
  }
})

const previewUrl = ref('')

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (!bytes) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
}

// 创建预览 URL
const createPreviewUrl = () => {
  // 清理旧的 URL
  if (previewUrl.value && !props.file.isUrl) {
    try {
      const decoded = decodeURIComponent(previewUrl.value)
      URL.revokeObjectURL(decoded)
    } catch (e) {
      console.warn('清理旧 URL 失败:', e)
    }
  }
  
  // 如果是 URL 文件
  if (props.file.isUrl) {
    // 使用工具函数规范化代理 URL
    const url = normalizeProxyUrl(props.file.url)
    previewUrl.value = encodeURIComponent(url)
    console.log('📊 使用 URL 预览 PPT:', url)
  } else {
    // 本地文件，创建 Blob URL
    const url = URL.createObjectURL(props.file.raw)
    previewUrl.value = encodeURIComponent(url)
    console.log('📊 使用本地文件预览 PPT:', props.file.name)
  }
}

// iframe 加载完成
const handleIframeLoad = () => {
  console.log('✓ PPT 预览 iframe 加载完成')
}

// 下载文件
const downloadFile = () => {
  try {
    const url = URL.createObjectURL(props.file.raw)
    const link = document.createElement('a')
    link.href = url
    link.download = props.file.name
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)
    ElMessage.success('文件下载成功')
  } catch (error) {
    console.error('文件下载失败:', error)
    ElMessage.error('文件下载失败')
  }
}

// 监听文件变化
watch(() => props.file, (newFile) => {
  if (newFile) {
    console.log('📊 检测到新 PPT 文件:', newFile.name)
    createPreviewUrl()
  }
}, { immediate: true })

// 组件卸载时清理 URL
onUnmounted(() => {
  if (previewUrl.value) {
    try {
      const decoded = decodeURIComponent(previewUrl.value)
      URL.revokeObjectURL(decoded)
    } catch (e) {
      console.warn('清理 URL 失败:', e)
    }
  }
})
</script>

<style scoped>
.ppt-preview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.ppt-toolbar {
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.file-size {
  font-size: 13px;
  color: #909399;
}

.loading-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #409EFF;
  gap: 16px;
}

.ppt-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: #f5f7fa;
}
</style>

